
<template>
   <div class="app-container">
      <el-row :gutter="24" style="justify-content: center;">
         <el-col :span="8" :xs="24">
            <el-card class="box-card">
               <template v-slot:header>
                 <div class="clearfix">
                   <span>个人信息</span>
                 </div>
               </template>
               <div>
                  <div class="text-center">
                     <userAvatar />
                  </div>
                  <ul class="list-group list-group-striped">
                     <li class="list-group-item">
                        <svg-icon icon-class="user" />用户名称
                        <div class="pull-right">{{ form.name || '-'}}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="phone" />手机号码
                        <div class="pull-right">{{ form.account || '-' }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="email" />邮箱
                        <div class="pull-right">{{ form.email || '-' }}</div>
                     </li>
                  </ul>
               </div>
            </el-card>
         </el-col>
         <el-col :span="12" :xs="24">
            <el-card>
               <template v-slot:header>
                 <div class="clearfix">
                   <span>基本资料</span>
                 </div>
               </template>
               <el-tabs v-model="activeTab">
                  <el-tab-pane label="基本资料" name="userinfo">
                     <userInfo @ok="ok" :user="state.user" />
                  </el-tab-pane>
                  <el-tab-pane label="修改密码" name="resetPwd">
                     <resetPwd />
                  </el-tab-pane>
               </el-tabs>
            </el-card>
         </el-col>
      </el-row>
   </div>
</template>

<script setup name="Profile">
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
import { useInfoStore } from '@/store/modules/info.js'
const userStore = useInfoStore();
const userStoreInfo = userStore.info;

const form = ref({
   account: userStoreInfo.account,
   name: userStoreInfo.name,
   email: userStoreInfo.email,
})


const activeTab = ref("userinfo");
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
});

function getUser() {
  getUserProfile().then(response => {
    state.user = response.data;
    state.roleGroup = response.roleGroup;
    state.postGroup = response.postGroup;
  });
};
function ok(message) {
   form.value  = useInfoStore().info;
   console.log(form.value);
   
}

// getUser();
</script>

<style lang='scss' scoped>
.app-container{
   width: 100%;
}
</style>